<div [@routerTransition] (click)="clickContainer()">
    <div class="content d-flex flex-column flex-column-fluid">
        <sub-header [title]="'Membership' | localize" [description]="'Membership' | localize">
            <div role="actions">
                <button type="button" class="btn btn-primary" (click)="goExport()" [buttonBusy]="exportLoading">
                    <i class="icon-excel"></i>
                    {{l('export')}}</button>
                <button type="button" class="btn btn-primary" (click)="deleteMembers()"
                    *ngIf="isGranted('Pages.Tenant.Member.Delete')">
                    <i class="icon-piliangcaozuo"></i>
                    {{l('deleteBatch')}}</button>
                <button type="button" class="btn btn-primary" (click)="memberShipModal.show(null,true)"
                    *ngIf="isGranted('Pages.Tenant.Member.Create')">
                    <i class="icon-add"></i>
                    {{l("add")+l('Membership')}}</button>
            </div>
        </sub-header>

        <div [class]="containerClass">
            <div class="card card-custom gutter-b">
                <div class="card-body">

                    <div class="row">
                        <form class="horizontal-form" autocomplete="off" name="AdsForm">
                            <div class="m-form m-form--label-align-right">
                                <div class="row align-items-center mb-4">
                                    <div class="col-2">
                                        <label>{{l('Name')}}</label>
                                        <div class="form-group">
                                            <div class="input-group">
                                                <input [(ngModel)]="filterText" name="filterText"
                                                    (keyup.enter)="getMembers($event)" autoFocus
                                                    class="form-control m-input " [placeholder]="l('Name')"
                                                    type="text">

                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-3">
                                        <label>{{l('registerDay')}}</label>
                                        <div class="form-group" style="position: static;">
                                            <date-range-picker name="SampleDateRangePicker" [(startDate)]="startTime"
                                                [(endDate)]="endTime" [allowFutureDate]="true" needInitDate="true">
                                            </date-range-picker>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <label>{{l('membershipType')}}</label>
                                        <div class="form-group ">
                                            <div class="input-group">
                                                <select class="form-control" [(ngModel)]="memberShipType"
                                                    name="memberShipType">
                                                    <option value="">{{l('All')}}</option>
                                                    <option [value]="memberType.value"
                                                        *ngFor="let memberType of memberTypes">{{memberType.name}}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-3" style="position:relative;padding-bottom: 0;top: -0.6rem;">
                                        <app-high-tree #highTree
                                            [selfConfig]="{labelName:l('belongStore'),searchDepth:'store',includeOfflineStore:true}"
                                            (onTreeUpdate)="onTreeUpdate($event)"></app-high-tree>
                                    </div>
                                    <!-- <div class="col-3" style="position:relative;padding-bottom: 0;top:0.8rem;">
                                            <label style="margin-bottom:0;position:relative;">{{l('belongStore')}}</label>
                                            <div class="form-group kt-form__group align-items-center">
                                                <div class="input-group" style="top:-0.6rem;">
                                                    <input class="form-control belongToTree" name="storeName" type="text"
                                                        readonly="readonly" style="background:#FFF !important;"
                                                        [(ngModel)]="storeText" (click)="showStore=!showStore;storeFilterTree()" />
                                                    <i class="icon-shaixuanxuanzhong belongToTree" style="position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:98;"
                                                        (click)="showStore=!showStore;storeFilterTree()"></i>
                                                </div>
                                            </div>

                                            <div style="position:absolute;top:6rem;z-index:9999;"></div>

                                            <div *ngIf="showStore" [ngClass]="{'float_panel':true,'beautyScroll':true}"
                                                style="width:90% !important;top:6rem;left:5%;max-height:calc(90vh - 253px) !important;min-height:100px !important;">
                                                <div class="panel_body">
                                                    <form name="StoreForm">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <input [(ngModel)]="storeFilter" name="treeFilterText"
                                                                    (keydown.enter)="storeFilterTree($event)" autoFocus
                                                                    class="form-control kt-input belongToTree"
                                                                    [placeholder]="l('SearchWithThreeDot')" type="text">
                                                            </div>
                                                        </div>
                                                        <div class="form-group beautyScroll" style="padding-left:20px;max-height:400px">
                                                            <app-my-tree #storeTree [config]="{'showOuterId':true,'needFilter':false,'name':'text'}"
                                                                [(items)]="stores"></app-my-tree>
                                                        </div>
                                                        <div class="form-group text-right">
                                                            <button *ngIf="stores&&stores.length" type="button" class="btn btn-primary"
                                                                (click)="getMembers();updateStoreSelected()">{{l('search')}}</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div> -->

                                    <div class="col-2">
                                        <div class="form-group m-form__group align-items-center">
                                            <label>&nbsp;</label>
                                            <div class="input-group">
                                                <button type="button" class="btn btn-primary"
                                                    [buttonBusy]="primengTableHelper.isLoading" (click)="getMembers()">
                                                    <i class="la la-refresh"></i>
                                                    {{l("search")}}
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="row align-items-center">
                        <!--<Primeng-Datatable-Start>-->
                        <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                            <!-- resizableColumns="primengTableHelper.resizableColumns" -->
                            <p-table #dataTable id="tableShow" (onLazyLoad)="getMembers($event)"
                                [value]="primengTableHelper.records"
                                [rows]="primengTableHelper.defaultRecordsCountPerPage" [(selection)]="memberSelection"
                                [paginator]="false" [lazy]="true"
                                [resizableColumns]="primengTableHelper.resizableColumns"
                                [responsive]="primengTableHelper.isResponsive">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th *ngIf="isGranted('Pages.Tenant.Member.Edit')">{{l('Actions')}}</th>
                                        <th style="width: 5.0em">
                                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                        </th>
                                        <th style="width:5%">{{l('RecordId')}}</th>
                                        <th>{{l('memberNo')}}</th>
                                        <th pSortableColumn="registerdTime">
                                            {{l('registerDay')}}
                                            <p-sortIcon field="registerdTime"></p-sortIcon>
                                        </th>
                                        <th pSortableColumn="type">
                                            {{l('membershipType')}}
                                            <p-sortIcon field="type"></p-sortIcon>
                                        </th>
                                        <th>{{l('wechatNick')}}</th>
                                        <th>{{l('Name')}}</th>
                                        <th>{{l('gender')}}</th>
                                        <th>{{l('registerPhoneNumber')}}</th>
                                        <th pSortableColumn="storeName">
                                            {{l('belongStore')}}
                                            <p-sortIcon field="storeName"></p-sortIcon>
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record let-i="rowIndex">
                                    <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                        <td *ngIf="isGranted('Pages.Tenant.Member.Edit')">
                                            <div class="btn-group dropdown" dropdown normalizePosition>
                                                <button class="dropdown-toggle btn btn-sm btn-primary" dropdownToggle
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="fa fa-cog"></i>
                                                    <span class="caret"></span> {{l("Actions")}}
                                                </button>
                                                <ul class="dropdown-menu" *dropdownMenu>
                                                    <li>
                                                        <a (click)="editMember(record)"
                                                            class="icon-bianji dropdown-item">{{l('Edit')}}</a>
                                                    </li>
                                                    <li>
                                                        <a (click)="deleteMember(record)"
                                                            class="icon-icon-test dropdown-item">{{l('Delete')}}</a>
                                                    </li>
                                                    <li>
                                                        <a (click)="PointInputModal.show();selectedMember=record;DispatchPoint.dispatchAmount=0;"
                                                            class="icon-add dropdown-item">{{l('DispatchPointToMember')}}</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                        <td>
                                            <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                        </td>
                                        <td> {{transIndex(i)}}</td>
                                        <td>{{record.memberNo}}</td>
                                        <td>{{record.registerdTime | date:'yyyy-MM-dd HH:mm'}}</td>
                                        <td>
                                            <span *ngFor="let memberType of memberTypes">
                                                <span *ngIf="memberType.value==record.type">
                                                    {{memberType.name}}
                                                </span>
                                            </span>
                                        </td>

                                        <td>
                                            <span>{{record.weChatNickName}}
                                            </span>
                                        </td>
                                        <td>{{record.name}}</td>
                                        <td>
                                            <span>{{l(record.gender) || "-"}}</span>
                                        </td>
                                        <td>{{record.regPhone}}</td>
                                        <td>
                                            <span>{{record.storeName}}
                                            </span>
                                        </td>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="emptymessage" let-records>
                                    <tr *ngIf="primengTableHelper.records">
                                        <td colspan="9" class="text-center">
                                            <img class="emptymessage"
                                                src="/assets/common/images/placeholder/memberHolder.png" />
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                    (onPageChange)="getMembers($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                                </span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<memberShipModal #memberShipModal (modalSave)="getMembers()"></memberShipModal>
<div bsModal #PointInputModal="bs-modal" aria-labelledby="createOrEditModal" class="modal fade" tabindex="-1"
    role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm" style="margin-top:30vh;">
        <div class="modal-content">
            <form #DispatchPointForm="ngForm">

                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{l("DispatchPointToMember")}}</span>
                    </h4>
                    <button type="button" class="close" (click)="PointInputModal.hide()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div style="display:flex;padding-bottom:20px;" [busyIf]="DispatchingPointToMember">
                        <div class="row">
                            <div class="form-group col-6">
                                <label>{{l('type')}}</label>
                                <select class="form-control" [(ngModel)]="DispatchPoint.inOrOutType" name="inOrOutType">
                                    <option [value]="DispatchPointToMemberInputInOrOutType['In']">{{l('In')}}</option>
                                    <option [value]="DispatchPointToMemberInputInOrOutType['Out']">{{l('Out')}}</option>
                                </select>
                            </div>
                            <div class="form-group col-6">
                                <label>{{l('dispatchAmount')}}</label>
                                <input class="form-control" type="number" [min]="selectedMember.point"
                                    [(ngModel)]="DispatchPoint.dispatchAmount" name="dispatchAmount" />
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"
                        (click)="PointInputModal.hide()">{{l("Cancel")}}</button>
                    <button class="btn btn-primary"
                        [disabled]="DispatchingPointToMember||DispatchPoint.inOrOutType==DispatchPointToMemberInputInOrOutType['Out']&&DispatchPoint.dispatchAmount>selectedMember.point"
                        [buttonBusy]="DispatchingPointToMember" [busyText]="l('SavingWithThreeDot')" type="button"
                        (click)="DispatchPointToMember()">
                        <i class="fa fa-save"></i>{{l('Save')}}</button>
                </div>
            </form>

        </div>
    </div>
</div>